<template>
  <div class="index_main">
    <div id="container">
      <div class="nav-top">

      </div>
      <div class="nav-bottom ">
        <div class="nav-left ">
          <div class="item-comm ">
            <div class="item-title ">
              各省项目情况数据统计
            </div>
            <div class="item-content ">

              <AreaList></AreaList>
            </div>
          </div>

          <div class="item-comm ">
            <div class="item-title ">
              项目来源数据统计
            </div>
            <div class="item-content ">
              <SourceList></SourceList>
              <!-- <div class="ts-sum">
                投诉总数：<span>111</span>个
              </div>
              <div class="ts-chart">

              </div> -->

            </div>
          </div>
        </div>


        <div class="nav-center ">
          <div class="center-top ">
            <img class="middle-bg" src="../../assets/nav/lunengguangda.png">
            <div class="center-sum ">
              <div class="center-dygb-sum" >
                项目数量统计：<span>{{ dySum.count }}</span>
              </div>
              <div class="center-dygb-sum" >
                项目金额统计：<span>{{ gbSum.money }}</span>
              </div>
            </div>
            <div class="mtop">
              <div class="map"></div>
              <div class="c1"></div>
              <div class="c2"></div>
            </div>
          </div>
          <div class="center-bottom">
            <div class="item-title center-title">
              最新订单数据记录
            </div>
            <div class="item-content center-con ">
              <OrderList></OrderList>
            </div>
          </div>
        </div>

        <div class="nav-right ">
          <div class="item-comm ">
            <div class="item-title ">
              项目进度状态统计
            </div>
            <div class="item-content ">
              <ProjectStatistics></ProjectStatistics>



            </div>
          </div>
          <div class="item-comm ">
            <div class="item-title ">
              近五年营收数据统计
            </div>
            <div class="item-content">

              <IncomeStatistics></IncomeStatistics>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import axios from 'axios'
import AreaList from "@/views/nav/modules/AreaList";
import OrderList from "@/views/nav/modules/OrderList";
import SourceList from "@/views/nav/modules/SourceList";
import IncomeStatistics from "@/views/nav/modules/IncomeStatistics";
import ProjectStatistics from "@/views/nav/modules/ProjectStatistics";

export default {
  name: "navPage",
  components: {
    AreaList,
    OrderList,
    SourceList,
    IncomeStatistics,
    ProjectStatistics

  },
  data() {
    return {
      dySum: '', //项目数量统计
      gbSum: '', //项目金额统计
    };
  },
  watch: {},
  created() {
    this.getSdySumCount();
    this.getGbSumCount();
  },
  destroyed() {

  },
  methods: {
    getSdySumCount() {
      getAction('/projectBaseInfo/projectBaseInfo/listCount').then(response => {
        this.dySum = response.data;
      });
    },
    getGbSumCount() {
      getAction('/projectBaseInfo/projectBaseInfo/listMoney').then(response => {
        this.gbSum = response.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}

.index_main {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow-y: hidden;
}

#container {
  width: 100%;
  height: 100%;
  position: absolute;
  /*background-image: url("../../assets/nav/plan.png");*/
  background-image: url("../../assets/nav/page-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>
<style scoped>
.border {
  border: 1px solid red;
}

/*
    #container img {
      position: absolute;
      top: 0;
      left: 50%;
      width: 55%;
      transform: translate(-50%, 0);
    }*/

.nav-top {
  width: 65vw;
  height: calc(15vh - 30px);
  margin: 10px auto;
  background-image: url("../../assets/nav/lngd-title.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.nav-bottom {
  height: 90vh;
  width: 99vw;
  margin: 0 auto;
  position: relative;
  top: -5vh;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.nav-left {
  width: 27%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.dygb-sum {
  height: 30%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.dygb-sum .dygb-dysl,
.dygb-gbsl {
  height: 4rem;
  margin: auto 0;
  width: 35%;
  border-radius: 5px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.dygb-dysl {
  background-image: url("../../assets/nav/item-con.png");
}

.dygb-gbsl {
  background-image: url("../../assets/nav/item-con2.png");
}

.dygb-tit {
  width: 70%;
  text-align: center;
  font-size: 0.8rem;
  color: #fff;
  height: 2rem;
  line-height: 2.5rem;
}

.dygb-con {
  color: #fff;
  position: absolute;
  top: 35%;
  left: 20%;
  transform: translate(1%, 1%);
  cursor: pointer;
}

.dygb-con span {
  font-size: 1rem;
  color: #23FFFC;
  display: inline-block;
  text-align: center;
  height: 2rem;
  line-height: 3rem;
  font-weight: 600;
  font-size: 1.6rem;
  margin-right: 3px;
}


.dygb-list {
  width: 90%;
  margin: 0 auto;
  height: 30%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.dygb-list div {
  width: 4rem;
  text-align: center;
  color: #27fffc;
  height: 25px;
  line-height: 25px;
  border: 1px solid #00afff;
  border-radius: 5px;
  margin: 2px 6px;
  font-size: 0.5rem;
}

.dygbActive {
  background-color: #00afff;
  color: #ffffff !important;
}

.dygb-chart {
  height: 40%;
}

.ts-sum {
  color: #fff;
  width: 200px;
  margin: 10px auto;
  height: 2rem;
  line-height: 2rem;
  display: flex;
}

.ts-sum span {
  color: #00EEFF;
  font-size: 2rem;
}

.ts-chart {
  height: 56%;
  width: 100%;
  position: relative;
}

.swgk-sum {
  color: #fff;
  /*width: 200px;*/
  margin: 10px auto;
  height: 2rem;
  line-height: 1.5rem;
  display: flex;
}

.swgk-sum div {
  margin: 0 8px;
}

.swgk-sum span {
  color: #00EEFF;
  font-size: 2rem;
}

.swgk-chart {
  height: 55%;
  width: 100%;
  position: relative;
}
</style>
<style scoped>
.nav-right {
  width: 27%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.qt-top {
  height: 70%;
  width: 95%;
  margin: 0 auto;
  padding: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.qt-top .qt-item {
  height: 43%;
  width: 20%;
  margin: 0 2%;
  position: relative;
  border: 1px solid rgba(0, 238, 255, 0.36);
  border-radius: 5px;
}

.qt-item img {
  position: absolute;
  top: 8% !important;
}

.qt-item span {
  position: absolute;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
}

.qt-item .span1 {
  color: #00EEFF;
  bottom: 1.5rem;
  font-weight: 600;
}

.qt-item .span2 {
  background-color: rgba(58, 94, 235, 0.18);
  color: #fff;
  height: 1.5rem;
  line-height: 1.5rem;
  bottom: 0;
  font-weight: 800;
}

.qt-item:hover {
  cursor: pointer;
}

.qt-bottom {
  height: 30%;
  width: 100%;
}
</style>

<!--center-->
<style scoped lang="scss">
.nav-center {
  width: 50%;
}

.center-top {
  height: 55%;
  width: 100%;
  position: relative;
}

.middle-bg {
  position: absolute;
  top: 67%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.center-sum {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 30%;
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  z-index: 999;
}

.mtop {
  width: 47rem;
  height: 42rem;

  .map {
    width: 22rem;
    height: 22rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*background: url("../../assets/images/map.png") no-repeat;*/
    background-size: cover;
  }

  .c1 {
    width: 26rem;
    height: 26rem;
    position: absolute;
    margin: auto;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/images/jt.png") no-repeat;
    background-size: cover;
    animation: xz1 8s infinite linear;
  }

  .c2 {
    width: 28rem;
    height: 28rem;
    position: absolute;
    margin: auto;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../../assets/images/lbx.png") no-repeat;
    background-size: cover;
    animation: xz2 10s infinite linear;
  }
}

@keyframes xz2 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes xz1 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

.center-title {
  background-image: url("../../assets/nav/card-title-large.png") !important;
}

.center-dygb-sum {
  background-image: url("../../assets/nav/circle-item-con.png");
  background-size: 100% 100%;
  color: #fff;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  padding-left: 20%;
  cursor: pointer;
}

.center-dygb-sum span {
  color: #01FDFC;
  font-size: 1.5rem;
}


.center-bottom {
  height: 44%;
  width: 98%;
  margin: 0 auto;
  padding: 5px 0;

}

.center-bottom .item-title {
  /*padding-left: 80px;*/
}

.center-con {
  height: 87% !important;
  padding-top: 5px;
  /*background-image: url("../../assets/nav/card-data-long.png");*/
  background-image: url("../../assets/nav/card-bg-l.png");
  background-size: 100% 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.center-con .c-b-item {
  /*border: 1px solid red;*/
  height: 30%;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #fff;
}

.c-b-item-left {
  width: 15%;
  position: relative;
}

.middleAbsolute {
  width: 100%;
  position: absolute;
  text-align: center;
  height: 30px;
  line-height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00eeff;
}

.more-dialog-btn {
  font-size: 0.8rem;
  cursor: pointer;
}

.c-b-item-right {
  width: 85%;
  position: relative;
  color: #00eeff;
  border-top: 1px solid #00eeff;
  padding-top: 5px;
}

.c-b-item-right .zjgk {
  height: 50%;
  width: 100%;
  position: relative;
}

.c-b-item-right .zjgk .zjgk-right {
  /*position: absolute;*/
  /*top: 50%;*/
  /*left: 28%;*/
  /*transform: translate(-50%, -50%);*/
  display: flex;
  flex-wrap: nowrap;
  justify-content: left;
}

.zjgk-right div {
  width: 25%;
  margin-left: 10px;
  border: 1px solid #00eeff;
  padding: 5px 5px;
  border-radius: 5px;
  font-size: 0.8rem;
}
</style>

<style scoped>
.item-comm {
  background-image: url("../../assets/nav/card-bg.png");
  background-size: 100% 100%;
  height: 48%;
  width: 100%;

}

.item-title {
  height: 10%;
  background-image: url("../../assets/nav/card-title.png");
  background-size: 100% 100%;
  color: #fff;
  font-weight: 600;
  padding-left: 50px;
  height: 45px;
  line-height: 50px;
  font-size: 1rem;
}

.item-content {
  height: 100%;
}
</style>
